<template>
  <div class="index">
    <!-- Breadcrumb 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 25px">
      <el-breadcrumb-item>医院后台</el-breadcrumb-item>
      <el-breadcrumb-item>数据看板</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="10">
      <!-- 数据卡片栏 -->
      <el-col :span="6">
        <el-card style="height: 130px" shadow="never">
          <i class="el-icon-phone-outline"></i>
          <h5 class="tit">预约人数</h5>
          <h2 class="num">634</h2>
          <p class="tag"><i>↑ 4.15%</i>最近一周</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 130px" shadow="never">
          <i class="el-icon-phone-outline"></i>
          <h5 class="tit">就诊人数</h5>
          <h2 class="num">314</h2>
          <p class="tag"><i class="red">↓ 3.15%</i>最近一周</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 130px" shadow="never">
          <i class="el-icon-phone-outline"></i>
          <h5 class="tit">住院人数</h5>
          <h2 class="num">156</h2>
          <p class="tag"><i class="red">↓ 4.15%</i>最近一周</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 130px" shadow="never">
          <i class="el-icon-phone-outline"></i>
          <h5 class="tit">出院人数</h5>
          <h2 class="num">84</h2>
          <p class="tag"><i>↑ 4.15%</i>最近一周</p>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="padding: 0; border: none">
      <el-row :gutter="10">
        <!-- 日历 -->
        <el-col :span="9">
          <el-card class="row" style="height: 320px; padding: 0; border: none" shadow="never">
            <el-calendar v-model="datevalue" style="width: 100%; height: 100%"></el-calendar>
            <div style="margin: 15px 0 0; font-size: 15px; color: #6c757d">当前时间：{{ currentTime }}</div>
          </el-card>
        </el-col>
        <!-- 折线图 -->
        <el-col :span="15">
          <el-card style="height: 320px; width: 100%; padding: 0px; border: none" shadow="never">
            <div ref="chartBox" class="chart-box" style="height: 300px; width: 580px; padding: 0"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 人员基本情况 -->
    <el-card style="margin-bottom: 5px; height: 320px; width: 60%; float: left" shadow="never">
      <h3 style="margin: 0; padding-bottom: 20px; color: #6c757d">人员基本情况<span class="tag"> / 截至今日</span></h3>
      <div style="float: left; width: 45%">
        <el-card style="border-left: 10px solid #008b8b">
          在岗医生：
          <span style="font-size: 20px; color: #4169e1; font-weight: 800">66</span> 人
        </el-card>
        <el-card style="border-left: 10px solid #008b8b; margin: 15px 0"> 在岗护士：<span style="font-size: 20px; color: #4169e1; font-weight: 800">40</span> 人 </el-card>
        <el-card style="border-left: 10px solid #008b8b"> 在院患者：<span style="font-size: 20px; color: #4169e1; font-weight: 800">216</span> 人 </el-card>
      </div>
      <div ref="chartBox1" class="chart-box1" style="height: 300px; width: 250px; margin-right: 10px; float: right"></div>
    </el-card>

    <!-- 支入/支出 -->
    <el-card style="margin-bottom: 5px; height: 320px; width: 39%; float: right" shadow="never">
      <h3 style="margin: 0; padding-bottom: 20px; color: #6c757d">支入 / 支出<span class="tag"> / 截至今日</span></h3>
      <template>
        <div ref="chartBox2" class="chart-box2" style="height: 300px; width: 290px; margin-right: 10px; float: right"></div>
      </template>
    </el-card>
  </div>
</template>
  
  <script>
// 完整导入echarts图表
import * as echarts from 'echarts';

export default {
  name: 'Index',
  data() {
    return {
      myChart: null,
      datevalue: new Date(), //辅助日历
      currentTime: '',
      data: [],
    };
  },

  mounted() {
    // //插入echarts图表
    this.myChart = echarts.init(this.$refs.chartBox);
    const option = {
      title: {text: '近一周趋势'},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      legend: {data: ['预约', '就诊', '住院', '出院']},
      yAxis: {type: 'value'},
      grid: {height: 180},
      series: [
        {name: '预约',
          data: [219, 98, 102, 172, 104, 79, 184],
          type: 'line',
          smooth: true},
        {name: '就诊',
          data: [190, 148, 93, 200, 60, 201, 84],
          type: 'line',
          smooth: true},
        {name: '住院',
          data: [98, 102, 85, 43, 54, 72, 100],
          type: 'line',
          smooth: true},
        {name: '出院',
          data: [48, 86, 91, 67, 25, 47, 108],
          type: 'line',
          smooth: true},
      ],
    };
    this.myChart.setOption(option);

    //系统时间
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);

    //第二个图表
    this.myChart1 = echarts.init(this.$refs.chartBox1);
    const option1 = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '0%',
        left: 'center',
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: {
            borderRadius: 10,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold',
            },
          },
          labelLine: { show: false },
          data: [
            { value: 66, name: '护士' },
            { value: 40, name: '医生' },
            { value: 216, name: '患者' },
          ],
        },
      ],
    };
    this.myChart1.setOption(option1);

    //第三个图表
    this.myChart2 = echarts.init(this.$refs.chartBox2);
    const option2 = {
      xAxis: {
        type: 'category',
        data: ['支出', '收入', '合计'],
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false, //隐藏y轴
        },
        axisLabel: {
          show: false, //隐藏刻度值
        },
      },
      series: [
        {
          data: [
            {
              value: 8650,
              itemStyle: {
                color: '#a90000',
              },
            },
            19480,
            {
              value: 10830,
              itemStyle: {
                color: '#548B54',
              },
            },
          ],
          type: 'bar',
        },
      ],
    };
    this.myChart2.setOption(option2);
  },

  methods: {
    //更新时间
    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString(); //时间
    },
  },
};
</script>
  
  <style lang="less" scoped>
//首页样式
.index {
  // 卡片样式
  .el-card {
    margin-bottom: 10px;
    position: relative;
    // 图片样式
    [class^='el-icon'] {
      font-size: 35px;
      color: #6b8bd69f;
      position: absolute;
      right: 25px;
      top: 30px;
      font-weight: bold;
    }
    // 标题
    .tit {
      color: rgba(76, 107, 142, 0.879);
      font-size: 16px;
      margin: 0;
    }
    // 数字
    .num {
      color: #244968d2;
      font-size: 30px;
      margin: 10px 0;
    }
    .tag {
      color: #999;
      margin: 0;
      font-size: 14px;
      > i {
        font-style: normal;
        margin-right: 10px;
        color: rgba(20, 169, 127, 0.811);
        &.red {
          color: #fa5c7cd4;
        }
      }
    }
  }
}
</style>